import React ,{useState} from 'react'
import './index.scss'
import { Tabs } from 'react-vant'


export default function My() {
  const [tabList,setTablist]=useState(['作业','课程','关注'])

  return (
    <>
      <div className="my-box-wrapper">
        <div className="my-header-wrapper">
          <div style={{height:'100px'}}></div>
          <div className="my-user-avater">
            <img src="/public/image/avater.jpg" alt="" />
          </div>
          <div className="my-user-name">
            Koto
          </div>
          <div className="my-user-signature">
            哪有什么岁月静好，只不过有人替你负重前行！
          </div>
          <div className="my-user-line">
            <div className='my-line-icon'>
              <img src="/public/icon/weixin.svg" alt="" />
            </div>
            <div className='my-line-icon'>
            <img src="/public/icon/QQ.svg" alt="" />
            </div>
            <div className='my-line-icon'>
            <img src="/public/icon/weibo.svg" alt="" />
            </div>
          </div>
        </div>
        <div className="my-tabs-list">
          <Tabs border type='jumbo'>
            {tabList.map((item,index) => (
              <Tabs.TabPane
                key={item}
                title={item}
                description={index+1}
              >
                <div className="box-tab-content">
                  <div >
                  <img src="/public/image/avater.jpg" alt="" />
                  </div>
                  <div >
                    <img src="/public/image/avater.jpg" alt="" />
                  </div>
                  <div >
                    <img src="/public/image/avater.jpg" alt="" />
                  </div>
                  <div >
                    <img src="/public/image/avater.jpg" alt="" />
                  </div>
                  <div >
                    <img src="/public/image/avater.jpg" alt="" />
                  </div>
                  <div >
                    <img src="/public/image/avater.jpg" alt="" />
                  </div>
                </div>
              </Tabs.TabPane>
            ))}
          </Tabs>
        </div>
      </div>
    </>
  )
}
